<template>
  <div class="relative w-full h-full overflow-y-auto overflow-x-hidden">
    <div class="card3">
      <div
        class="flex1 flex pl35 pt20 pb30"
        style="border-bottom: 2px solid #f7f7f7"
      >
        <picPreview :src="tenantInfo?.logo" width="115px" height="115px" />
        <div class="ml22">
          <div class="fs-18 color-404040">
            {{ tenantInfo?.["name" + locale] }}
          </div>
          <div class="mt14">
            {{ t("basic.simple_stat.登录账号") }}：<span
              class="color-primary"
              >{{ tenantInfo?.code }}</span
            >
          </div>
          <div class="mt4">
            {{ t("basic.simple_stat.店铺类型") }}：{{
              tenantInfo?.settleType == 1
                ? t("basic.simple_stat.个人经营店铺")
                : t("basic.simple_stat.企业经营店铺")
            }}
            <!-- <span class="ml32">店铺权限：店铺超级管理员</span> -->
          </div>
          <div class="mt4">
            {{ t("basic.simple_stat.店铺有效期限") }}：{{
              moment(tenantInfo?.validTimeEnd).format("YYYY-MM-DD HH:mm:ss")
            }}
          </div>
        </div>
      </div>
      <div class="flex pt37 pb37">
        <div
          class="card_item flex_fdc_aic flex1 cursor-pointer"
          v-for="item in dataList"
          :key="item.title"
          @click="toPath(item)"
        >
          <div class="card_item_title fs-16">{{ item.title }}</div>
          <div class="card_item_count">{{ summaryData[item.key] ?? "--" }}</div>
        </div>
      </div>
    </div>
    <div class="flex_aic gap-10 w-full">
      <div class="card2 flex1" v-for="item in dataList2" :key="item.name">
        <div class="flex_aic_jcsb">
          <PageHeader :title="item.name" />
          <div class="fs-12 card2-time">
            {{ moment().format("YYYY-MM-DD HH:mm:ss") }}
          </div>
        </div>
        <div class="flex card2-datas flex-wrap">
          <div v-for="item2 in item.data" :key="item2.title">
            <div class="flex_aic">
              <span class="mr8">{{ item2.title }}</span>
              <el-tooltip :content="item2.tips" placement="right">
                <el-icon :size="14" color="rgb(218, 218, 218)"
                  ><WarningFilled
                /></el-icon>
              </el-tooltip>
            </div>
            <div class="card2-data-count">
              <span class="fs-16" v-if="item2.title.includes('元')">￥</span>
              <span>{{ summaryData[item2.key] ?? "--" }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="flex gap-10 flex-wrap">
      <div class="card3 mt10" style="width: calc(50% - 5px)">
        <div class="flex_aic_jcsb card3-header pl10 pr10">
          <PageHeader class="p10 border-bottom w-full" style="margin-bottom: 0">
            <div class="flex_aic">
              <div class="fs-14 font-600">
                {{ $t("basic.simple_stat.支付下单金额趋势") }}
              </div>
            </div>
            <template #right>
              <DatePick v-model="dateRange" @change="getSaleTrend" />
            </template>
          </PageHeader>
        </div>
        <div class="chart_box w-full" id="chart1"></div>
      </div>
      <div class="card3 mt10" style="width: calc(50% - 5px)">
        <div class="flex_aic_jcsb card3-header pl10 pr10">
          <PageHeader class="p10 border-bottom w-full" style="margin-bottom: 0">
            <div class="flex_aic">
              <div class="fs-14 font-600">
                {{ $t("basic.simple_stat.会员新增趋势") }}
              </div>
            </div>
            <template #right>
              <DatePick v-model="dateRange" @change="getVipAndTenantTrend" />
            </template>
          </PageHeader>
        </div>
        <div class="chart_box w-full" id="chart2"></div>
      </div>

      <!-- <div class="card3 mt10" style="width: calc(50% - 5px)">
        <div class="flex_aic_jcsb card3-header pl10 pr10">
          <PageHeader class="p10 border-bottom w-full" style="margin-bottom: 0">
            <div class="flex_aic">
              <div class="fs-14 font-600">
                {{ $t("basic.simple_stat.店铺销售排行TOP10") }}
              </div>
            </div>
            <template #right>
              <DatePick v-model="dateRange" @change="getTenantSaleTop10" />
            </template>
          </PageHeader>
        </div>
        <div class="p12">
          <el-table
            :data="tableData1"
            style="width: 100%"
            class="cover-table"
            border
            height="400"
          >
            <el-table-column
              type="index"
              :label="t('basic.simple_stat.序号')"
              width="80"
            />
            <el-table-column
              :prop="`tenantName${locale}`"
              :label="t('basic.simple_stat.店铺名称')"
            />
            <el-table-column
              prop="saleAmount"
              :label="t('basic.simple_stat.销售额')"
              sortable
            />
            <el-table-column
              prop="saleCount"
              :label="t('basic.simple_stat.订单量')"
              sortable
            />
          </el-table>
        </div>
      </div> -->

      <div class="card3 mt10" style="width: calc(50% - 5px)">
        <div class="flex_aic_jcsb card3-header pl10 pr10">
          <PageHeader class="p10 border-bottom w-full" style="margin-bottom: 0">
            <div class="flex_aic">
              <div class="fs-14 font-600">
                {{ $t("basic.simple_stat.商品销售排行TOP10") }}
              </div>
            </div>
            <template #right>
              <DatePick @change="getSkuSaleTop10" />
            </template>
          </PageHeader>
        </div>
        <div class="p12">
          <el-table
            :data="tableData2"
            style="width: 100%"
            class="cover-table"
            border
            height="400"
          >
            <el-table-column
              type="index"
              :label="t('basic.simple_stat.序号')"
              width="80"
            />
            <el-table-column
              :prop="`skuName${locale}`"
              :label="t('basic.simple_stat.商品名称')"
            />
            <el-table-column
              prop="saleAmount"
              :label="t('basic.simple_stat.销售额')"
              sortable
            />
            <el-table-column
              prop="saleCount"
              :label="t('basic.simple_stat.订单量')"
              sortable
            />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useStore } from "@/store";
import moment from "moment";
import { WarningFilled } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import picPreview from "@/components/picPreview.vue";
import { useI18n } from "vue-i18n";
import Api from "@/config/api/api";
import DatePick from "@/components/datePick.vue";
import initChart from "@/utils/chart";
import { useRouter } from "vue-router";

const router = useRouter()
const { locale, t } = useI18n();
const tenantInfo = ref({})
const dateRange = ref(moment().format("YYYY-MM-DD"));
const summaryData = ref({});
const todoData = ref({});
const dataList = ref([
  {
    title: t("basic.simple_stat.待发货"),
    count: '',
    key: "unSendSaleCount",
    path: "/order/order_lists",
    query: {
      type: '3'
    }
  },
  {
    title: t("basic.simple_stat.售后退货单"),
    count: '',
    key: "refundSaleCount",
    path: "/order/service",
    query: {}
  },
/*  {
    title: t("basic.simple_stat.违规商品"),
    count: '',
  },*/
/*  {
    title: t("basic.simple_stat.待确定结算单"),
    count: '',
  },*/
  {
    title: t("basic.simple_stat.待回复评论"),
    count: '',
    key: "unReplySaleSkuCount",
    path: "/order/comment",
    query: {
      status: 1
    }
  },
]);

const dataList2 = ref([
  {
    name: t("basic.simple_stat.今日交易概况"),
    data: [
      {
        title: t("basic.simple_stat.下单数"),
        key: "todaySaleCreateCount",
        tips: t("basic.simple_stat.统计时间内用户成功提交订单的笔数总和"),
      },
      {
        title: t("basic.simple_stat.下单金额元"),
        key: "todaySaleCreateAmount",
        tips: t("basic.simple_stat.统计时间内用户成功提交订单的金额总和"),
      },
      {
        title: t("basic.simple_stat.支付订单数"),
        key: "todaySaleCount",
        tips: t("basic.simple_stat.统计时间内用户成功支付的订单数量总和"),
      },
      {
        title: t("basic.simple_stat.支付金额元"),
        key: "todaySaleAmount",
        tips: t("basic.simple_stat.统计时间内用户成功支付的金额总和"),
      },
    ],
  },
  {
    name: t("basic.simple_stat.今日商品概况"),
    data: [
      {
        title: t("basic.simple_stat.商品总数"),
        key: "skuCount",
        tips: t("basic.simple_stat.截止至当前时间店铺的商品spu总数"),
      },
      {
        title: t("basic.simple_stat.新增商品数"),
        key: "todaySkuCreateCount",
        tips: t("basic.simple_stat.统计时间内新增商品spu数"),
      },
      {
        title: t("basic.simple_stat.在售商品数"),
        key: "skuOnSaleCount",
        tips: t("basic.simple_stat.截止至当前时间状态为在售的商品数量"),
      },
      {
        title: t("basic.simple_stat.动销商品数"),
        key: "skuHasSaleCount",
        tips: t("basic.simple_stat.统计时间内销量不为0的商品数"),
      },
    ],
  },
  {
    name: t("basic.simple_stat.今日用户概况"),
    data: [
      {
        title: t("basic.simple_stat.用户总数"),
        key: "vipCount",
        tips: t("basic.simple_stat.在本店铺有过浏览行为的历史去重人数总和"),
      },
      {
        title: t("basic.simple_stat.新增用户数"),
        key: "todayVipCount",
        tips: t("basic.simple_stat.统计时间内注册并首次访问店铺的用户数"),
      },
      {
        title: t("basic.simple_stat.支付客单价"),
        key: "todaySalePerAmount",
        tips: t("basic.simple_stat.统计时间内支付金额支付人数"),
      },
      {
        title: t("basic.simple_stat.支付人数"),
        key: "todaySaleVipCount",
        tips: t(
          "basic.simple_stat.统计时间内成功付款的去重人数拼团在成团时计入支付人数定金预售在尾款支付时计入支付人数"
        ),
      },
    ],
  },
]);

const tableData1 = ref([]);

const tableData2 = ref(
  Array.from({ length: 10 }, (_, index) => ({
    goodsName: `${t("basic.simple_stat.商品名称")}${index + 1}`,
    sales: Math.floor(Math.random() * 1000),
    orderCount: Math.floor(Math.random() * 100),
  }))
);

const chart1 = null;
const chart2 = null;

const toPath = (item)=>{
  router.push({
    path: item.path,
    query: item.query
  })
}

const getTenantInfo = ()=>{
  Api.tenant_current().then(res=>{
    tenantInfo.value = res.data || {}
  });
}
const getTenantSaleTop10 = (value, type) => {
  Api.tenantSaleTop10({
    startDate: value[0],
    endDate: value[1],
    type: type,
  }).then((res) => {
    tableData1.value = res.data;
  });
};

const getSkuSaleTop10 = (value, type) => {
  Api.skuSaleTop10({
    startDate: value[0],
    endDate: value[1],
    type: type,
  }).then((res) => {
    tableData2.value = res.data;
  });
};

const getSaleTrend = (value, type) => {
  Api.saleTrend({
    startDate: value[0],
    endDate: value[1],
    type: type,
  }).then((res) => {
    initChart("chart1", chart1, [
      {
        name: t("basic.simple_stat.下单金额"),
        data: res.data?.map((item) => [item.time, item.saleCreateAmount]) || [],
        rgb: "33,195,188",
      },
      {
        name: t("basic.simple_stat.支付金额"),
        data: res.data?.map((item) => [item.time, item.saleAmount]) || [],
        rgb: "30,135,240",
      },
    ]);
  });
};

const getVipAndTenantTrend = (value, type) => {
  Api.vipAndTenantTrend({
    startDate: value[0],
    endDate: value[1],
    type: type,
  }).then((res) => {
    initChart("chart2", chart2, [
      {
        name: t("basic.simple_stat.新增会员数"),
        data: res.data?.map((item) => [item.time, item.vipCount]) || [],
        rgb: "33,195,188",
      },
      // {
      //   name: t("basic.simple_stat.新增店铺数"),
      //   data: res.data?.map((item) => [item.time, item.tenantCount]) || [],
      //   rgb: "30,135,240",
      // },
    ]);
  });
};

const getSummary = () => {
  Api.summaryForTenant({}).then((res) => {
    summaryData.value = res.data;
  });
};

const getReportTodo = () => {
  
};

onMounted(() => {
  getTenantInfo();
  getReportTodo();
  getSummary();
  getTenantSaleTop10(
    [
      moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
      moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59"),
    ],
    1
  );
  getSkuSaleTop10(
    [
      moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
      moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59"),
    ],
    1
  );
  getSaleTrend(
    [
      moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
      moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59"),
    ],
    1
  );
  getVipAndTenantTrend(
    [
      moment().subtract(1, "days").format("YYYY-MM-DD 00:00:00"),
      moment().subtract(1, "days").format("YYYY-MM-DD 23:59:59"),
    ],
    1
  );
});
</script>

<style scoped lang="scss">
.card {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 4px;
}
.card_item {
  border-right: 1px solid hsla(0, 0%, 84.7%, 0.5);
  &:last-child {
    border-right: none;
  }
  .card_item_title {
    color: #000;
    &::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #f0be35;
      border-radius: 50%;
      margin-right: 12px;
    }
  }
  .card_item_count {
    font-size: 34px;
    font-weight: 700;
    text-align: center;
  }
}

.card2 {
  position: relative;
  height: 301px;
  padding: 10px;
  background-color: #fff;
  margin-top: 10px;
  .card2-title {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: -5px;
    width: 163px;
    height: 37px;
    padding-top: 11px;
    padding-left: 16px;
    background-size: 100%;
    color: #fff;
    font-size: 15px;
    line-height: 25px;
    background-image: url("@/assets/images/basic/titleBg.png");
  }
  .card2-time {
    position: absolute;
    z-index: 2;
    top: 22px;
    right: 25px;
    color: #ff7e28;
  }
  .card2-datas {
    margin-top: 45px;
    padding-left: 95px;
    > div {
      width: calc((100% - 95px) / 2);
      height: 103px;
    }
    .card2-data-count {
      margin-top: 13px;
      color: #333;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
        PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue,
        Helvetica, Arial, sans-serif;
      font-size: 28px;
      letter-spacing: -2px;
      line-height: 28px;
    }
  }
}

.chart_box {
  height: 458px;
  margin-top: 30px;
}

.card3 {
  background-color: #ffffff;
  border-radius: 4px;
  .card3-header {
    height: 48px;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
  }
}
</style>
